<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">API请求日志</div>

      <el-form ref="query-form" :model="p">

        <el-form-item label="模糊查询" prop="name" class="c-item">
          <el-input v-model="p.name" placeholder="请输入关键字" clearable>
          </el-input>
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
        <el-button type="info" icon="el-icon-refresh" @click="$refs['query-form'].resetFields();f5()">重置
        </el-button>

      </el-form>

      <!-- ------------- 快捷按钮 ------------- -->
      <div class="fast-btn">
        <el-button type="danger" icon="el-icon-delete" @click="batchDel()"
        >删除
        </el-button>
      </div>

      <el-table
          :border="true"
          resizable
          ref="tableRef"
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          max-height="450">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column
            prop="userId"
            min-width="80"
            label="请求用户ID">
        </el-table-column>
        <el-table-column
            prop="url"
            min-width="60"
            show-overflow-tooltip
            label="请求地址">
        </el-table-column>
        <el-table-column
            prop="method"
            min-width="30"
            label="请求方法">
        </el-table-column>
        <el-table-column
            prop="queryString"
            min-width="60"
            show-overflow-tooltip
            label="get请求参数">
        </el-table-column>
        <el-table-column
            prop="formData"
            min-width="60"
            show-overflow-tooltip
            label="请求表单数据">
        </el-table-column>
        <el-table-column
            prop="jsonData"
            min-width="60"
            show-overflow-tooltip
            label="请求JSON数据">
        </el-table-column>
        <el-table-column
            prop="requestTime"
            min-width="80"
            show-overflow-tooltip
            label="请求时间">
        </el-table-column>
        <el-table-column
            prop="responseCode"
            min-width="30"
            label="返回code">
        </el-table-column>
        <el-table-column
            min-width="60"
            label="操作">
          <template slot-scope="scope">

            <el-popover
                placement="left"
                @show="get(scope.row.id)"
                width="500"
                :open-delay="200"
                :close-delay="200"
                trigger="hover">
              <div style="height: calc(100vh - var(--nav-right-1-height) - var(--nav-right-2-height));
              overflow: auto">
                <el-descriptions title="日志详情" size="medium" :column="2">
                  <el-descriptions-item label="请求用户ID">{{ showData.userId }}</el-descriptions-item>
                  <el-descriptions-item label="请求地址">{{ showData.url }}</el-descriptions-item>
                  <el-descriptions-item label="请求方法">{{ showData.method }}</el-descriptions-item>
                  <el-descriptions-item label="get请求参数">{{ showData.queryString }}</el-descriptions-item>
                  <el-descriptions-item label="请求表单数据">{{ showData.formData }}</el-descriptions-item>
                  <el-descriptions-item label="请求JSON数据">{{ showData.jsonData }}</el-descriptions-item>
                  <el-descriptions-item label="返回code">{{ showData.responseCode }}</el-descriptions-item>
                  <el-descriptions-item label="请求日期">{{ showData.requestTime }}</el-descriptions-item>
                </el-descriptions>
              </div>
              <el-button type="text" slot="reference" @click.stop="">详情</el-button>
            </el-popover>
            <el-popconfirm
                title="确认移除？移除后无法恢复！！"
                @confirm="del(scope.row.id)"
            >
              <el-button
                  slot="reference"
                  type="text">
                移除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination background
                       layout="total, prev, pager, next, sizes, jumper"
                       :current-page.sync="p.current"
                       :page-size.sync="p.size"
                       :total="p.total"
                       :page-sizes="[10, 20, 30, 40, 50, 100]"
                       @current-change="f5()"
                       @size-change="f5()">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
let PATH = "/api-log"
module.exports = {
  components: {},
  watch: {
    'p.name': function (val) {
      //this.f5()
    }
  },
  data() {
    return {
      tableData: [],
      p: {
        name: '',
        current: 1,
        size: 10,
        total: -1
      },
      showData: {
        name: undefined,
        userId: undefined,
        url: undefined,
        method: undefined,
        queryString: undefined,
        formData: undefined,
        jsonData: undefined,
        requestTime: undefined,
        responseCode: undefined,
      },
      formData: {
        name: undefined,
        userId: undefined,
        url: undefined,
        method: undefined,
        queryString: undefined,
        formData: undefined,
        jsonData: undefined,
        requestTime: undefined,
        responseCode: undefined,
      },
      dialogVisible: false,
      dialogTitle: ''
    }
  },
  methods: {
    batchDel() {
      let selects = this.$refs['tableRef'].selection
      if (selects.length === 0) return sa.error('请至少勾选一条记录')
      sa.alert('确认删除多个记录', () => {
        sa.ajax(PATH + "/del", {ids: JSON.stringify(selects.map(i => i.id))}, (res) => {
          sa.msgOk(res.msg)
          this.f5()
        }, {type: 'post'})
      })
    },
    get(id) {
      sa.ajax(PATH + '/get', {id: id}, (res) => {
        this.showData = res.data
      }, {type: 'get'})
    },
    del(id) {
      sa.ajax(PATH + "/del", {id: id}, (res) => {
        sa.msgOk(res.msg)
        this.f5()
      }, {type: 'post'})
    },
    f5() {
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {
  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
